<template>
  <div class="login">
    <div class="login_box">
      <el-form class="elform" ref="resetForm" :model="form" :rules="Lrules">
        <el-form-item prop="username">
          <el-input
            prefix-icon="iconfont icon-user"
            placeholder="用户名"
            v-model="form.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="iconfont icon-mima"
            placeholder="密码"
            v-model="form.password"
            type="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="button">
        <el-button type="primary" @click="login">登陆</el-button>
        <el-button type="danger" @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: "admin",
        password: "123456",
      },
      Lrules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 16, message: "用户名不符合规则", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    reset: function () {
      this.$refs.resetForm.resetFields();
      console.log("reset");
    },
    login: function () {
      this.$refs.resetForm.validate(async (login) => {
        if (!login) return;
        const res = await this.$http.post("login", this.form);
        if (res.data.meta.status == 200) {
          // console.log(res.data.data.token);
          window.sessionStorage.setItem("token", res.data.data.token);
          //获取token并保存在sessionStorage中
          // 编程式导航到后台主页
          this.$router.push("/Home");
        } else {
          this.$alert("密码或用户名错误", "消息提示", {
            confirmButtonText: "确定",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.login {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: aquamarine;
  overflow: hidden;
}
.login_box {
  width: 600px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  background: white;
}
.elform {
  padding: 40px;
  margin: 20px;
}
.button {
  position: absolute;
  right: 15px;
  bottom: 20px;
}
</style>